<template>
  <div
    class="playlist-container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <div class="inner_box">
      <div class="top-wrap">
        <div class="topimg-wrap">
          <!-- 封面 -->
          <img :src="playlist.coverImgUrl + '?param=200y200'" alt />
        </div>
        <div class="info-wrap">
          <!-- 名字 -->
          <div class="title_box">
            <span class="gedan">歌单</span>
            <span class="title">{{ playlist.name }}</span>
          </div>
          <div class="play_count">
            <div>
              <span>歌曲数</span>
              <span>{{ playlist.tracks ? playlist.tracks.length : 0 }}</span>
            </div>
            <div>
              <span>播放</span>
              <span>{{ playlist.playCount | playCount }}</span>
            </div>
          </div>
          <div class="author-wrap">
            <!-- 头像 -->
            <img
              class="avatar"
              :src="playlist.creator.avatarUrl + '?param=100y100'"
              v-if="playlist.creator !== undefined"
              alt
            />
            <!-- 名字 -->
            <span class="name" v-if="playlist.creator !== undefined">{{
              playlist.creator.nickname
            }}</span>
            <!-- 时间 -->
            <span class="time">{{ playlist.createTime | dateFormat }}</span>
          </div>
          <div class="btn_box">
            <div class="play-wrap">
              <div @click="playList(playlist.tracks)">
                <span class="iconfont icon-triangle-down"></span>
                <span class="text">播放全部</span>
              </div>
              <span class="el-icon-plus"></span>
            </div>
            <div class="my_btn">
              <span class="iconfont icon-shoucang"></span>
              <span>收藏({{ playlist.subscribedCount }})</span>
            </div>
            <div class="my_btn">
              <span class="iconfont icon-fenxiang"></span>
              <span>分享({{ playlist.shareCount }})</span>
            </div>
            <div class="my_btn">
              <span class="iconfont icon-xiazai"></span>
              <span>下载全部</span>
            </div>
          </div>
          <div
            class="tag-wrap"
            v-if="playlist.tags && playlist.tags.length > 0"
          >
            <span class="tag">标签:</span>
            <ul>
              <li v-for="(item, index) in playlist.tags" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="desc-wrap">
            <span>简介:</span><span>{{ playlist.description }}</span>
          </div>
        </div>
      </div>

      <el-tabs v-model="activeIndex">
        <el-tab-pane label="歌曲列表" name="1">
          <table cellspacing="0" class="el-table playlit-table" stripe>
            <thead>
              <th class="sort"></th>
              <th class="opera">操作</th>
              <th>音乐图片</th>
              <th>音乐标题</th>
              <th>歌手</th>
              <th class="zj">专辑</th>
              <th class="time">时长</th>
            </thead>
            <tbody>
              <tr
                class="el-table__row"
                v-for="(item, index) in playlist.tracks"
                :key="index"
                @dblclick="playMusic(item)"
              >
                <td
                  class="td_sort"
                  style="width:50px;textAlign:center"
                  v-html="index + 1 < 10 ? '0' + (index + 1) : index + 1"
                ></td>
                <td class="td_opera" style="width:70px">
                  <span class="iconfont icon-shoucang"></span>
                  <span
                    class="iconfont icon-xiazai"
                    @click="download(item.id)"
                  ></span>
                </td>
                <td>
                  <div class="img-wrap">
                    <img :src="item.al.picUrl + '?param=100y100'" alt />
                    <span class="iconfont icon-triangle-down"></span>
                  </div>
                </td>
                <td>
                  <div class="song-wrap">
                    <div class="name-wrap">
                      <!-- 名称 -->
                      <span>{{ item.name }}</span>
                      <!-- mv图标 -->
                      <span
                        v-if="item.mvid !== 0"
                        class="iconfont icon-mv"
                      ></span>
                    </div>
                  </div>
                </td>
                <td>{{ item.ar[0].name }}</td>
                <td class="td_zj">{{ item.al.name }}</td>
                <td class="td_time" style="width:80px;textAlign:center">
                  {{ item.dt | formDate }}
                </td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane :label="`评论(${total})`" name="2">
          <!-- 精彩评论 -->
          <div
            class="comment-wrap"
            v-if="hotComments !== undefined && hotComments.length !== 0"
          >
            <p class="title">
              精彩评论
              <span class="number">({{ hotComments.length }})</span>
            </p>
            <div class="comments-wrap">
              <!-- 评论 -->
              <div
                class="item"
                v-for="(item, index) in hotComments"
                :key="index"
              >
                <div class="icon-wrap">
                  <!-- 头像 -->
                  <img :src="item.user.avatarUrl + '?param=50y50'" alt />
                </div>
                <div class="content-wrap">
                  <div class="content">
                    <span class="name">{{ item.user.nickname }}</span>
                    <span class="comment">：{{ item.content }}</span>
                  </div>
                  <!-- 回复 -->
                  <div class="re-content" v-if="item.beReplied.length != 0">
                    <span class="name">{{
                      item.beReplied[0].user.nickname
                    }}</span>
                    <span class="comment"
                      >：{{ item.beReplied[0].content }}</span
                    >
                  </div>
                  <div class="date">{{ item.time | dateFormat }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 最新评论 -->
          <div class="comment-wrap">
            <p class="title">
              最新评论
              <span class="number">({{ total }})</span>
            </p>
            <div class="comments-wrap">
              <!-- 评论 -->
              <div class="item" v-for="(item, index) in comments" :key="index">
                <div class="icon-wrap">
                  <!-- 头像 -->
                  <img :src="item.user.avatarUrl + '?param=50y50'" alt />
                </div>
                <div class="content-wrap">
                  <div class="content">
                    <span class="name">{{ item.user.nickname }}</span>
                    <span class="comment">：{{ item.content }}</span>
                  </div>
                  <!-- 回复 -->
                  <div class="re-content" v-if="item.beReplied.length !== 0">
                    <span class="name">{{
                      item.beReplied[0].user.nickname
                    }}</span>
                    <span class="comment"
                      >：{{ item.beReplied[0].content }}</span
                    >
                  </div>
                  <div class="date">{{ item.time | dateFormat }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页器 -->
          <!-- <div class="pagebox">
            <el-pagination
              @current-change="handleCurrentChange"
              background
              layout="prev, pager, next"
              :total="total"
              :current-page="pageNum"
              :page-size="pageSize"
            ></el-pagination>
          </div> -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { GetListDetail, GetListComments } from "../../../../api/music"
import request from "../../../../api/request"
import { exportFileRequest } from "../../../../api/download"
import axios from "axios"
export default {
  name: "playlist",
  data() {
    return {
      loading: true,
      id: "",
      activeIndex: "1",
      // 总条数
      total: 0,
      // 页码
      pageNum: 1,
      pageSize: 10,

      playlist: {},
      hotComments: [],
      comments: [],
    }
  },
  created() {
    this.id = this.$route.query.id
    this.listdetail()
    this.listcomments()
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val
      this.getPlaylistComments()
    },

    // 点击播放全部按钮触发的事件：将所有歌曲添加到播放列表中
    playList(list, index) {
      this.$store.dispatch("addList", list)
    },

    // 获取歌单详情
    async listdetail() {
      const res = await GetListDetail({
        id: this.id,
      })
      console.log(res)
      this.avatarUrl = Object.freeze(res.playlist.creator.avatarUrl)
      this.playlist = Object.freeze(res.playlist)

      this.loading = false
    },

    // 获取歌单评论
    async listcomments() {
      const res = await GetListComments({
        id: this.id,
        limit: this.pageSize,
        offset: (this.pageNum - 1) * this.pageSize,
      })
      this.comments = Object.freeze(res.comments)
      this.hotComments = Object.freeze(res.hotComments)
      this.total = Object.freeze(res.total)
    },

    // 点击播放歌曲
    async playMusic(item) {
      this.$store.dispatch("getSong", { id: item.id, autoplay: true })
    },

    // 下载按钮
    async download(id) {
      console.log(id)
      let res = await request({
        url: "/song/url",
        data: {
          id,
        },
        method: "get",
      })
      if (res.data[0].url) {
        let url = res.data[0].url
        console.log(url)
        let link = document.createElement("a")
        link.style.display = "none"
        link.href = url
        link.setAttribute("download", "测试excel.xls")
        document.body.appendChild(link)
        link.click()
      }
    },
    downloadFile(data) {
      // 文件导出
      if (!data) {
        return
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";

.playlist-container {
  width: 100%;
  margin: auto;
  padding: 0px 20px;
  padding-top: 10px;
  box-sizing: border-box;
  user-select: none;

  display: flex;
  justify-content: center;
  .inner_box {
    width: 100%;
    max-width: 1200px;
    position: relative;
  }
}

.el-tabs {
  margin: 0px 20px;
}

.top-wrap {
  width: 100%;

  padding: 0px 20px;
  margin-top: 20px;
  box-sizing: border-box;
  display: flex;
  .topimg-wrap {
    width: 180px;
    height: 180px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info-wrap {
    width: calc(100% - 180px) !important;
    padding-left: 30px;
    box-sizing: border-box;
    overflow: hidden;
    .btn_box {
      display: flex;
      margin-bottom: 10px;
      align-items: center;
    }
    .play-wrap {
      height: 30px;
      border-radius: 4px;
      background: $primary;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.5s;
      div {
        padding: 0px 10px;
        border-right: 1px solid #ffffff;
      }
      span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        color: white;
        font-size: 13px;
      }
      .text {
        height: 100%;
      }
      .iconfont {
        margin-right: 8px;
      }
      .el-icon-plus {
        font-size: 15px;
        padding: 0px 7px;
      }
    }
    .play-wrap:hover {
      cursor: pointer;
      opacity: 0.8;
    }
    .my_btn {
      margin-left: 20px;
      border: 1px solid #ccc;
      height: 30px;
      padding: 0 10px;
      border-radius: 5px;
      span {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        vertical-align: middle;
      }
      .iconfont {
        font-size: 16px;
      }
    }
    .my_btn:hover {
      cursor: pointer;
    }
    .title_box {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 10px;
      .gedan {
        font-size: 12px;
        height: 18px;
        line-height: 18px;
        width: 36px;
        color: $primary;
        border: 1px solid $primary;
        margin-right: 10px;
        margin-top: 10px;
      }
      .title {
        line-height: 40px;
        font-size: 24px;
        width: calc(100% - 200px);
        word-wrap: break-word;
        word-break: normal;
        font-weight: bold;
      }
    }

    .play_count {
      position: absolute;
      top: 30px;
      right: 40px;
      display: flex;
      div {
        span {
          display: block;
          text-align: right;
          color: rgb(131, 130, 130);
          font-size: 14px;
        }
      }
      div:nth-child(1) {
        padding-right: 20px;
        border-right: 1px solid rgb(131, 130, 130);
      }
      div:nth-child(2) {
        padding-left: 20px;
      }
    }
    .author-wrap {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .name {
        margin-right: 10px;
      }
      .time {
        font-size: 14px;
      }
    }
    .desc-wrap {
      line-height: 25px;
      word-break: break-all;
      word-wrap: break-word;
      width: 100%;
      text-align: left;
      box-sizing: border-box;
      span:last-child {
        font-size: 15px;
        text-align: left;
      }
      span:first-child {
        font-weight: bold;
        margin-right: 10px;
        text-align: left;
      }
    }

    .tag-wrap {
      display: flex;
      margin-bottom: 10px;
      ul {
        display: flex;
        li:not(:last-child)::after {
          content: "/";
          margin: 0 4px;
        }
      }
      span {
        margin: 0;
      }
    }
  }
}

.img-wrap {
  width: 40px;
  height: 40px;
  margin-right: 30px;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .icon-triangle-down {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    color: $primary;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    opacity: 1;
    transition: 0.5s;
    display: none;
  }

  tr:hover .icon-triangle-down {
    opacity: 1;
  }
}
td {
  border: none;
  .iconfont {
    padding: 0px 2px;
    transition: 0.5s;
  }
  .icon-xiazai {
    font-size: 18px;
  }
  .iconfont:hover {
    color: $primary;
  }
}
tr {
  padding: 0px 10px;
  box-sizing: border-box;
}
tr:hover {
  cursor: pointer;
  background: rgb(236, 236, 236);
}
.icon-triangle-down::before {
  transform: translateX(1px);
}
li {
  list-style: none;
}

.title {
  text-align: left;
}

.playlist-container .comment-wrap {
  margin-bottom: 30px;
  .title {
    font-size: 20px;
    .number {
      color: black;
      font-size: 18px;
    }
  }
  .item {
    display: flex;
    padding-top: 20px;
    .icon-wrap {
      margin-right: 15px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .date {
      color: #bebebe;
      font-size: 14px;
      text-align: left;
    }
    .content {
      text-align: left;
    }
    .content-wrap {
      padding-bottom: 20px;
      flex: 1;
      .name {
        color: #517eaf;
        font-size: 14px;
      }
      .comment {
        font-size: 14px;
      }
      .content,
      .re-content {
        margin-bottom: 10px;
      }
      .re-content {
        text-align: left;
        padding: 10px;
        background-color: #e6e5e6;
        border-radius: 5px;
      }
    }
  }
  .item:not(:last-child) .content-wrap {
    border-bottom: 1px solid #f2f2f1;
  }
}

.pagebox {
  display: flex;
  width: 100%;
  height: 60px;
  justify-content: center;
  align-items: center;
}

/deep/ .el-tabs__item.is-active {
  color: $primary;
}
/deep/ .el-tabs__active-bar {
  background-color: $primary;
}
/deep/ .el-tabs__nav div:hover {
  color: $primary;
}
</style>
